<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:sec="https://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head>
    <meta charset="UTF-8">
    <title>BookList</title>
    <link href="/layui/css/layui.css" type="text/css" rel="stylesheet">
    <script src="/layui/layui.js"></script>
    <script src="/js/libSys/commonHeader.js" rel="script"></script>
</head>
<body>

<div th:replace="libSys/libSysCommonHeader::libSysCommonHeader"></div>

<br>
<br>
<br>
<div class="layui-container" style="width:88%">

    <div class="layui-btn-group" sec:authorize="hasRole('ROLE_ADMIN')">
        <button type="button" class="layui-btn" id="addNewTypeButton">新增分类</button>
        <form action="/bookList" method="post" style="display:inline;margin-left:10px"><button type="submit" class="layui-btn" id="orderByCount">按书籍数量排序</button></form>
    </div>

    <table class="layui-table" lay-skin="line" lay-size="lg">
        <colgroup>
            <col>
            <col>
            <col>
            <col>
            <col>
            <col>
            <col>
        </colgroup>
        <thead>
        <tr>
            <th>分类号</th>
            <th>书籍名称</th>
            <th>作者</th>
            <th>出版社</th>
            <th>详细信息</th>
            <th>数量</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>

        <tr th:each="book: ${bookList}">
            <td th:text="${book.bookTypeId}"></td>
            <td th:text="${book.title}"></td>
            <td th:text="${book.author}"></td>
            <td th:text="${book.publisher}"></td>
            <td th:text="${book.details}"></td>
            <td th:text="${book.count}"></td>
            <td>
                <div class="layui-btn-group" >
                    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm showBookListByTypeButton" th:attr='show-url=@{/bookList/}+${book.bookTypeId}'>
                        <i class="layui-icon">&#xe654;</i>
                    </button>
                    <button type="button" sec:authorize="hasRole('ROLE_ADMIN')" class="layui-btn layui-btn-primary layui-btn-sm editBookListByTypeButton" th:attr='edit-url=@{/manager/editBookType/}+${book.bookTypeId}'>
                        <i class="layui-icon">&#xe642;</i>
                    </button>
                    <button type="button" sec:authorize="hasRole('ROLE_ADMIN')" class="layui-btn layui-btn-primary layui-btn-sm bookTypeDeleteButton" th:attr='del-url=@{/manager/deleteBookType/}+${book.bookTypeId}'>
                        <i class="layui-icon">&#xe640;</i>
                    </button>
                </div>
            </td>
        </tr>
        </tbody>
    </table>
</div>

<script>
    layui.use(["layer","jquery"],function(){
        var layer = layui.layer;
        var $ = layui.jquery;
        $(".showBookListByTypeButton").on("click",function(){
            var show_url = $(this).attr("show-url");
            layer.open({
                type:2,
                content:show_url,
                area:['90%','500px'],
                end:function(){
                    location.reload();
                }
            });
        });
        $(".editBookListByTypeButton").on("click",function(){
            var edit_url = $(this).attr("edit-url");
            layer.open({
                type:2,
                content:edit_url,
                area:['1000px','500px'],
                end:function(){
                    location.reload();
                }
            });
        });
        $("#addNewTypeButton").on("click",function(){
            layer.open({
                type:2,
                content:'/manager/addBookType',
                area:['1000px','500px'],
                end:function(){
                    location.reload();
                }
            });
        });
        <!--$("#orderByCount").on("click",function(){-->
            <!--$.post({-->
                <!--url:"/bookList",-->
                <!--data:"desc",-->
                <!---->
            <!--})-->
        <!--});-->
        $(".bookTypeDeleteButton").on("click",function(data){
            var del_url = $(this).attr("del-url");
            $.post({
                url:del_url,
                data:del_url,
                success:function(data){
                    layer.msg(data);
                    location.reload();
                },
                error:function(data){
                    layer.msg(data);
                    location.reload();
                }
            });
        });
    })
</script>

</body>
</html>